import React from 'react'
import { Button, Table, Form, Modal, Input, message,Row,Col,Popconfirm } from 'antd'
import { DeleteOutlined,PlusOutlined } from '@ant-design/icons';
import http from '../../../service/http';
export default function Norm() {
  const [data, setData] = React.useState({});
  const [page, setPage] = React.useState(1);
  const [EditVisible, setEditVisible] = React.useState(false);
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [menuList,setMenuList]=React.useState([])
  const [inputNorms,setInputNorms]=React.useState('')
  const [normId,setNormId]=React.useState(null)
  function getPageNorm(page, pageSize) {
    http.getPageNorm({ pageNum: page, pageSize: pageSize }).then((res) => {
      if (res.code !== 200) return
      setData(res.data)
    })
  }
  React.useEffect(() => {
    getPageNorm(page, 8)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const columns = [
    {
      title: '规格编号',
      dataIndex: 'id',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '规格名称',
      dataIndex: 'name',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '',
      ellipsis:true,
      align:'center',
      render:(edit,row)=>{
        return(<div>
          <Button type='default' onClick={()=>{
            http.getNormsTerm({normsType:row.id}).then((res)=>{
              if(res.code!==200)return
              setMenuList(res.data)
              setNormId(row.id)
              setIsModalVisible(true)
            })
          }}>规格编辑</Button>
        </div>)
      }
    },
  ];
  return (
    <div style={{ padding: '0 100px' }}>
      <div style={{ fontSize: '20px', fontWeight: '800' }}>菜品规格</div>
      <div style={{ height: '32px', padding: '16px 0', boxSizing: 'content-box' }}>
        <Button style={{ float: 'right' }} type='primary' onClick={() => {
          setEditVisible(true)
        }}>添加规格</Button>
      </div>
      <Table rowKey='id'
        columns={columns}
        dataSource={data.records}
        bordered
        pagination={
          {
            pageSize: 8,
            total: data.pages,
            onChange: (pageNum, pageSize) => {
              setPage(pageNum)
              getPageNorm(page, pageSize)
            }
          }
        }
      />
      <Edit visible={EditVisible}
        close={() => { setEditVisible(false) }}
        getPageNorm={getPageNorm}
        page={page}
      />
      <Modal title="规格编辑" visible={isModalVisible}
        onCancel={(e)=>{setIsModalVisible(false)}}
        style={{}}
        footer={null}>
        <Row>
          <Col span={24}><h4>名称(建议填三个)</h4></Col>
            {menuList.length>0?menuList.map((item,index)=>{
              return <React.Fragment key={item.id}>
                <Col span={16} key={item.id} style={{display:'flex',justifyContent:'center',alignItems:'center',border:'1px #e0e0e0 solid'}}>{item.name}</Col>
                <Col span={8} key={item.id+'and'}>
                    <Popconfirm
                      title="你确定要删除吗？"
                      onConfirm={()=>{
                        http.deleteNormsTerm({id:item.id}).then((res)=>{
                          message.success('删除成功')
                          http.getNormsTerm({normsType:item.normsType}).then((res)=>{
                            if(res.code!==200)return
                            setMenuList(res.data)
                          })
                        })
                      }}
                      // onCancel={cancel}
                      okText="是"
                      cancelText="否"
                    >
                      <Button style={{width:'100%'}} icon={<DeleteOutlined style={{color:'red'}} />} />
                    </Popconfirm>
                </Col>
              </React.Fragment>
            }):<div>暂时为空</div>}
          <Col span={24}><h4>添加</h4></Col>
          <Col span={16}><Input style={{width:'100%',border:'1px #1890ff solid'}} placeholder='输入规格' value={inputNorms} onChange={(e)=>{
            setInputNorms(e.target.value)
          }}/></Col>
          <Col span={8}><Button style={{width:'100%'}} type="primary" icon={<PlusOutlined />} onClick={()=>{
            if(inputNorms===''){message.info('不能为空！')}
            http.addNormsTerm({name:inputNorms,normsType:normId}).then((res)=>{
                message.success('添加成功')
                setInputNorms('')
                http.getNormsTerm({normsType:normId}).then((res)=>{
                  if(res.code!==200)return
                  setMenuList(res.data)
                })
              })
            }} /></Col>
        </Row>
      </Modal>
    </div>
  )
}
function Edit(props) {
  const [editFrom] = Form.useForm()
  React.useEffect(() => {
    if (props.visible) {
      editFrom.resetFields()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.visible])
  return (
    <div>
      <Modal visible={props.visible} onCancel={() => { props.close() }}
        forceRender
        okText='确定'
        title='增加菜品规格'
        cancelText='取消'
        onOk={async () => {
          try {
            let fieldsValue = await editFrom.validateFields()
            http.addNorm(fieldsValue).then((res) => {
              if (res.code !== 200) return
              props.close()
              editFrom.resetFields()
              props.getPageNorm(props.page, 8)
              message.success('添加成功')
            })
          }
          catch {
            message.error('添加失败')
          }
        }}
      >
        <Form
          layout="horizontal"
          form={editFrom}
          name="editForm"
        >
          <Form.Item
            name="name"
            label="规格名称"
            rules={[
              {
                min: 2,
                message: '请输入大于等于2个字符！',
              },
              {
                required: true,
                message: '请输入规格名称',
              },
            ]}
          >
            <Input placeholder='名称' />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}